<template>
  <!-- 公共侧边栏组件 -->
  <div class="sidebar">
    <!-- default-active：当前激活菜单的 index；
         router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，默认值为 false； -->
    <el-menu
      class="sidebar-el-menu"
      :default-openeds="defaultOpened"
      :default-active="defaultActive"
      @select="handleSelect"
      background-color="#324157"
      text-color="#fff"
      active-text-color="#20a0ff"
      router
    >    
        <el-menu-item index="/index" @click="handleAdd({name:'主页', path:'/index'})">
            <i class="el-icon-s-home"></i>
            <span>主页</span>
        </el-menu-item>
        <el-submenu index="1" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>新建订单</span>
            </template>
            <el-menu-item index="/enter" @click="handleAdd({name:'录入订单', path:'/enter', index:'1'})">录入订单</el-menu-item>
            <el-menu-item index="/agreement" @click="handleAdd({name:'合同管理', path:'/agreement', index:'1'})">合同管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/order" @click="handleAdd({name:'订单管理', path:'/order', index:'2'})" v-show="$store.state.user.role == 0">订单管理</el-menu-item>
            
        </el-submenu>
        <el-submenu index="3" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-truck"></i>
              <span>车辆管理</span>
            </template>
            <el-menu-item index="/add" @click="handleAdd({name:'新增车辆', path:'/add', index:'3'})" v-show="$store.state.user.role == 0">新增车辆</el-menu-item>
            <el-menu-item index="/car" @click="handleAdd({name:'车辆管理', path:'/car', index:'3'})" v-show="$store.state.user.role == 0">车辆管理</el-menu-item>
        </el-submenu>
        <el-submenu index="4" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>司机管理</span>
            </template>
            <el-menu-item index="/register" @click="handleAdd({name:'司机注册', path:'/register', index:'4'})">司机注册</el-menu-item>
            <el-menu-item index="/driver" @click="handleAdd({name:'司机管理', path:'/driver', index:'4'})">司机管理</el-menu-item>
        </el-submenu>
        <el-submenu index="5" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>客户管理</span>
            </template>
            <el-menu-item index="/customer" @click="handleAdd({name:'新建客户', path:'/customer', index:'5'})">新建客户</el-menu-item>
            <el-menu-item index="/manage" @click="handleAdd({name:'客户管理', path:'/manage', index:'5'})">客户管理</el-menu-item>
        </el-submenu>
        
        <el-submenu index="7" v-show="$store.state.user.role == 0">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>费用管理</span>
            </template>
            <el-menu-item index="/approve" @click="handleAdd({name:'报销审批', path:'/approve', index:'7'})">报销审批</el-menu-item>
            <el-menu-item index="/stream" @click="handleAdd({name:'流水处理', path:'/stream', index:'7'})">流水处理</el-menu-item>
        </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
            defaultOpened: [],
            defaultActive: ""
      };
    },
    computed: {
      menuData() {
          return this.$store.state.menuDefault;
      }  
    },
    watch: {
        menuData:{
            handler(nval) {
                this.defaultActive = nval.path;
                this.defaultOpened.push(nval.index);
            },
            deep: true, // 深度监听
            immediate: true,//立即执行
        }  
    },
    methods:{
        /*选中菜单后，把选中菜单信息加入到vuex的标签数组中*/
        handleAdd(val) {
            let flag = true;
            for (let i = 0; i < this.$store.state.tabList.length; i ++) {
                if (val.path == this.$store.state.tabList[i].path) {
                    flag = false;
                }
            }
            if (flag)
                this.$store.dispatch('ADD_TAGS', val);
        },
        /*当菜单选中时，把选中菜单信息存入vuex中*/
        handleSelect(index, path) {
            this.$store.dispatch('ADD_MENU', {index: path[0], path: index});
        }   
    },
    mounted() {
        /*首次进入页面后，获取vuex获取的菜单信息，为了保证刷新后选中菜单不变*/
        this.defaultActive = this.$store.state.menuDefault.path !== '' ? this.$store.state.menuDefault.path : "/index";
        this.defaultOpened.push(this.$store.state.menuDefault.index);
    }
  };
</script>

<!-- CSS 样式 -->
<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    height: 100vh;
    overflow-y: scroll;
  }
  .sidebar::-webkit-scrollbar {
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 230px;
  }
  .sidebar > ul {
    height: 100%;
  }
</style>